<%@ page contentType="text/html; charset=utf-8" %>

<%@ include file="/WEB-INF/jsp/includeCss.jsp"%>
<%@ include file="/WEB-INF/jsp/includeJs.jsp"%>
<%@ include file="/WEB-INF/jsp/includeTaglib.jsp"%>


<form id="saveTaskStepForm" target="tempFrame" method="post" action="<c:url value='/admin/saveTaskStep.html' />">
	<table width="100%" border="0" cellpadding="0" cellspacing="5">
	  <tr>
	    <td valign="top">
	      <table class="dbborder" width="100%" border="0" cellpadding="0" cellspacing="0">
	        <tr>
	          <td valign="bottom" class="blueTableBg">&nbsp;配置管理&nbsp;-&nbsp;新增步骤项</td>
	        </tr>
	        <tr>
	          <td>
	            <table width="100%" border="0" cellpadding="0" cellspacing="5">
	              <tr>
	                <td>
	                  <table width="100%" border="0" cellpadding="0" cellspacing="0">
	                    <tr>
	                      <td class="dashTopLeft"><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
	                      <td class="dashTop" width=100%><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
	                      <td class="dashTopRight"><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
	                    </tr>
	                    <tr>
	                      <td class="dashLeft"><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
	                      <td align="center">
	                        <table width="100%" border="0" cellpadding="0" cellspacing="3">
	                          <tr>
	                            <td width="114" height="20" class="globalText">数据类型</td>
	                            <td height="20" class="globalText">
	                            		<select id="actionId" name="actionId" onchange="findTaskActionDataTypeByActionId(this)" >
		                            		<c:forEach var="taskAction" items="${taskAction}" varStatus="status">
		                            			<option value="${taskAction.id}">${taskAction.text}</option>
		                            		</c:forEach>
		                            	</select>
	                            </td>
	                          </tr>

	                          <tr id="singleConfigBlock" style="display: none;">
	                            <td valign="top" width="114" height="20" class="globalText">
	                            	<div style="margin-top: 10px;">
	                            		单选步骤
	                            		<a href="javascript:addStepItemName()">+添加步骤</a>
	                            	</div>
	                            </td>
	                            <td height="20" class="globalText">
	                            	<div style="margin-left: 20px;">
	                            		<ul id="addBlocks">

	                            		</ul>
	                            	</div>
	                            </td>
	                          </tr>

	                          <tr>
	                            <td width="114" height="20" class="globalText">步骤标识</td>
	                            <td height="20" class="globalText">
	                            	<select id="dataTypeId" name="dataTypeId" class="required">
	                            	</select>
	                            </td>
	                          </tr>
	                          <!--
	                          <tr>
	                            <td width="114" height="20" class="globalText">步骤名称</td>
	                            <td height="20" class="globalText">
	                            	<input id="stepName" class="txtbox" size="20" name="actionName" value="" />
	                            </td>
	                          </tr>
	                           -->
	                          <tr>
	                            <td align="center" colspan="2">
	                              <table border="0" cellpadding="0" cellspacing="2">
	                                <tr>
	                                  <td><input onclick="javascript:saveTaskStepForm();"  type="button" name="saveBtn" class="btnStyle" value="  保存  "></td>
	                                </tr>
	                              </table>
	                            </td>
	                          </tr>
	                        </table>
	                      </td>
	                      <td class="dashRight"><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
	                    </tr>
	                    <tr>
	                      <td class="dashBottomLeft"><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
	                      <td class="dashBottom" width=100%><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
	                      <td class="dashBottomRight"><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
	                    </tr>
	                  </table>
	                </td>
	              </tr>
	            </table>
	          </td>
	        </tr>
	      </table>
	    </td>
	  </tr>
	</table>
	<input type="hidden" id="itemNames" name="itemNames" />
	<input type="hidden" id="extData" name="extData" />

</form>

<div style="display: none;">
	<li id="hideBlock" >选项:
		<input class="required stepItemName" style="margin-right: 6px; margin-bottom: 3px;" type="text" />
		<a id="delBtn" itemNameId href="javascript:void(0)">删除<a/>
	</li>


	<li id="hideBlockExtra" >选项:
		<input id="inputName" class="required stepItemName" style="margin-right: 6px; margin-bottom: 3px;" type="text" />
		<select class="required ext" style="margin-right: 6px; margin-bottom: 3px;">
            <c:forEach var="cat" items="${salesScoringCategories}">
                <option value="${cat.displayName}">${cat.displayName}</option>
            </c:forEach>
			<%--<option>Stopping</option>--%>
			<%--<option>Holding</option>--%>
			<%--<option>Closing</option>--%>
			<%--<option>Base requirement</option>--%>
			<%--<option>机动分</option>--%>
		</select>

		<select class="required ext" style="margin-right: 6px; margin-bottom: 3px;">
			<option value="1" >YES</option>
			<option value="0" >NO</option>
		</select>

		<input  class="required ext" style="margin-right: 6px; margin-bottom: 3px;" type="text" />
		<a id="delBtn" itemNameId href="javascript:void(0)">删除<a/>
	</li>
</div>


<script type="text/javascript">

	var index=0;

	function addStepItemName(){
		index++;

		if($("#actionId").val()==4){
			var li=$('#hideBlock').clone(true);
			$(li).attr("id","itemName_"+index);
			$(li).find('#delBtn').attr("itemNameId","itemName_"+index);
			$(li).find('#delBtn').bind("click",function(){
				$('#'+$(this).attr("itemNameId")).remove();
			});
			$(li).find('#inputName').addClass("stepItemName");
			$('#addBlocks').append(li);
		}else if($("#actionId").val()==6){
			var li=$('#hideBlockExtra').clone(true);
			$(li).attr("id","itemName_"+index);
			$(li).find('#delBtn').attr("itemNameId","itemName_"+index);
			$(li).find('#delBtn').bind("click",function(){
				$('#'+$(this).attr("itemNameId")).remove();
			});
			$(li).find('#inputName').addClass("stepItemName");
			$('#addBlocks').append(li);
		}

	}

	function clearStepItemName(){
		$('#addBlocks').empty();
	}

	function findTaskActionDataTypeByActionId(sel) {

		$('#dataTypeId').empty();

		if (sel.value != 4) {
			$('#singleConfigBlock').hide();
			clearStepItemName();
		}
		if (sel.value != 6) {
			$('#singleConfigBlock').hide();
			clearStepItemName();
		}


		if (sel.value == 4) {
			addStepItemName();
			addStepItemName();
			$('#singleConfigBlock').fadeIn();
		}
		if (sel.value == 6) {
			addStepItemName();
			addStepItemName();
			$('#singleConfigBlock').fadeIn();
		}



		if (sel.value == 0) {
			$('#stepName').val('');
			return;
		}

		$.getJSON(
				'<c:url value='/admin/findTaskActionDataTypeByActionId.html' />?actionId='+ sel.value, function(jsonData) {
					for ( var i = 0; i < jsonData.length; i++) {
						$('#dataTypeId').append('<option value='+jsonData[i].id+'>'+ jsonData[i].name + '</option>');
					}
				});

	}

	function saveTaskStepForm(){


		var itemNames="";
		$('.stepItemName').each(function(){
			if(this.value!=""){
				itemNames+=this.value+";";
			}
		});

		assignNameForNull();
		if(itemNames!=""){
			$('#itemNames').val(itemNames);
		}

		if ($("#actionId").val() == 6) {
			var extData=new Array();

			$("#addBlocks").children().each(function(){
				var obj=new Object();
				var type="";
				var point="";
				var memo="";
				$(this).find(".ext").each(function(i){
					if(i==0){
						type=this.value;
					}
					if(i==1){
						point=this.value;
					}
					if(i==2){
						memo=this.value;
					}
				});

				extData.push({
					type:type,
					point:point,
					memo:memo
				});
			});
			$('#extData').val(JSON.stringify(extData));
		}

		$('#saveTaskStepForm').submit();
	}

	function submitCallbackSuccess(obj) {
		window.location = "<c:url value='/admin/stepList.html' />";
	}

	//$.metadata.setType("attr", "validate");
	$().ready(function() {
		var validate = $("#saveTaskStepForm").validate({
			showErrors : customShowErrors,
			onfocusout : false,
			onkeyup : false,
			onclick : false,
			rules : {
				actionId : "actionId"
			}
		});
	});
</script>
